Reactの並行レンダリング：Fiberアーキテクチャとワークループ分析によるパフォーマンスの向上

Reactは、フロントエンド開発における主要な勢力として、ますます複雑化し、インタラクティブなユーザーインターフェースの要求に応えるために継続的に進化してきました。この進化における最も重要な進歩の1つは、React 16で導入された並行レンダリングです。このパラダイムシフトは、Reactが更新を管理し、コンポーネントをレンダリングする方法を根本的に変え、大幅なパフォーマンスの向上を実現し、より応答性の高いユーザーエクスペリエンスを可能にしました。この記事では、並行レンダリングの中核となる概念を掘り下げ、Fiberアーキテクチャとワークループを探求し、これらのメカニズムがよりスムーズで効率的なReactアプリケーションにどのように貢献するかについての洞察を提供します。

並行レンダリングの必要性の理解

並行レンダリング以前は、Reactは同期的に動作していました。更新が発生すると（例：状態の変化、propsの更新）、Reactはコンポーネントツリー全体を単一の、中断されない操作でレンダリングし始めました。この同期レンダリングは、特に大規模なコンポーネントツリーまたは計算コストの高い操作を扱う場合に、パフォーマンスのボトルネックにつながる可能性があります。これらのレンダリング期間中、ブラウザは応答しなくなり、ぎくしゃくした、イライラするユーザーエクスペリエンスにつながります。これはしばしば「メインスレッドをブロックする」と呼ばれます。

ユーザーがテキストフィールドに入力しているシナリオを想像してみてください。入力されたテキストを表示するコンポーネントが大規模で複雑なコンポーネントツリーの一部である場合、各キーストロークはメインスレッドをブロックする再レンダリングをトリガーする可能性があります。これにより、顕著なラグが発生し、不快なユーザーエクスペリエンスにつながります。

並行レンダリングは、レンダリングタスクをより小さく、管理しやすい作業単位に分割できるようにすることで、この問題に対処します。これらのユニットは、必要に応じて優先順位付け、一時停止、および再開できるため、Reactはレンダリングタスクを、ユーザー入力やネットワークリクエストの処理など、他のブラウザ操作とインターリーブできます。このアプローチにより、メインスレッドが長期間ブロックされるのを防ぎ、より応答性が高く、流動的なユーザーエクスペリエンスを実現します。これは、Reactのレンダリングプロセスのマルチタスク処理と考えることができます。

Fiberアーキテクチャの紹介

並行レンダリングの中心にあるのは、Fiberアーキテクチャです。Fiberは、Reactの内部リコンシリエーションアルゴリズムの完全な再実装を表しています。以前の同期リコンシリエーションプロセスとは異なり、Fiberは、更新を管理し、コンポーネントをレンダリングするための、より洗練された、粒度の細かいアプローチを導入します。

Fiberとは？

Fiberは、コンポーネントインスタンスの仮想表現として概念的に理解できます。Reactアプリケーションの各コンポーネントは、対応するFiberノードに関連付けられています。これらのFiberノードは、コンポーネントツリーをミラーリングするツリー構造を形成します。各Fiberノードは、コンポーネント、そのprops、その子、およびその現在の状態に関する情報を保持します。重要なことに、そのコンポーネントに対して行う必要のある作業に関する情報も保持します。

Fiberノードの主なプロパティは次のとおりです。

• type: コンポーネントの型（例：div、MyComponent）。
• key: コンポーネントに割り当てられた一意のキー（効率的なリコンシリエーションに使用）。
• props: コンポーネントに渡されたprops。
• child: コンポーネントの最初の子を表すFiberノードへのポインタ。
• sibling: コンポーネントの次の兄弟を表すFiberノードへのポインタ。
• return: コンポーネントの親を表すFiberノードへのポインタ。
• stateNode: 実際のコンポーネントインスタンスへの参照（例：ホストコンポーネントのDOMノード、クラスコンポーネントインスタンス）。
• alternate: コンポーネントの以前のバージョンを表すFiberノードへのポインタ。
• effectTag: コンポーネントに必要な更新の種類を示すフラグ（例：配置、更新、削除）。

Fiberツリー

Fiberツリーは、アプリケーションのUIの現在の状態を表す永続的なデータ構造です。更新が発生すると、Reactはバックグラウンドで新しいFiberツリーを作成し、更新後のUIの目的の状態を表します。この新しいツリーは、「work-in-progress」ツリーと呼ばれます。work-in-progressツリーが完了すると、Reactはそれを現在のツリーと交換し、変更をユーザーに表示します。

このデュアルツリーアプローチにより、Reactはレンダリングの更新を非ブロッキング方式で実行できます。現在のツリーは、work-in-progressツリーがバックグラウンドで構築されている間、ユーザーに表示されたままになります。これにより、更新中にUIがフリーズしたり、応答しなくなるのを防ぎます。

Fiberアーキテクチャの利点

• 割り込み可能なレンダリング： Fiberを使用すると、Reactはレンダリングタスクを一時停止および再開できるため、ユーザーインタラクションを優先し、メインスレッドがブロックされるのを防ぐことができます。
• インクリメンタルレンダリング： Fiberを使用すると、Reactはレンダリングの更新をより小さい作業単位に分割でき、時間の経過とともに段階的に処理できます。
• 優先順位付け： Fiberを使用すると、Reactはさまざまな種類の更新に優先順位を付けることができるため、重要な更新（例：ユーザー入力）が重要度の低い更新（例：バックグラウンドデータフェッチ）よりも前に処理されるようになります。
• エラー処理の改善： Fiberを使用すると、レンダリング中のエラーの処理が容易になります。エラーが発生した場合、Reactは以前の安定した状態にロールバックできます。

ワークループ：Fiberがどのように並行性を実現するか

ワークループは、並行レンダリングを駆動するエンジンです。これは、Fiberツリーをトラバースし、各Fiberノードで作業を実行し、UIを段階的に更新する再帰関数です。ワークループは、次のタスクを担当します。

• 処理する次のFiberの選択。
• Fiberでの作業の実行（例：新しい状態の計算、propsの比較、コンポーネントのレンダリング）。
• 作業の結果でFiberツリーを更新。
• 実行する作業のスケジューリング。

ワークループのフェーズ

ワークループは、主に2つのフェーズで構成されます。

1. レンダリングフェーズ（リコンシリエーションフェーズとも呼ばれます）： このフェーズは、work-in-progress Fiberツリーの構築を担当します。このフェーズ中、ReactはFiberツリーをトラバースし、現在のツリーと目的の状態を比較し、必要な変更を決定します。このフェーズは非同期で、割り込み可能です。DOMで変更する*必要*があるものを決定します。
2. コミットフェーズ： このフェーズは、変更を実際のDOMに適用する役割を担います。このフェーズ中、ReactはDOMノードを更新し、新しいノードを追加し、古いノードを削除します。このフェーズは同期的で、割り込みできません。DOMを*実際に*変更します。

ワークループがどのように並行性を実現するか

並行レンダリングの鍵は、レンダリングフェーズが非同期で割り込み可能であるという事実にあります。これは、Reactがいつでもレンダリングフェーズを一時停止して、ブラウザがユーザー入力やネットワークリクエストなどの他のタスクを処理できるようにすることを意味します。ブラウザがアイドル状態の場合、Reactは中断したところからレンダリングフェーズを再開できます。

レンダリングフェーズを一時停止および再開できるこの機能により、Reactはレンダリングタスクを他のブラウザ操作とインターリーブし、メインスレッドがブロックされるのを防ぎ、より応答性の高いユーザーエクスペリエンスを保証します。一方、コミットフェーズは、UIの一貫性を保証するために同期する必要があります。ただし、通常、コミットフェーズはレンダリングフェーズよりもはるかに高速であるため、通常、パフォーマンスのボトルネックを引き起こすことはありません。

ワークループでの優先順位付け

Reactは、優先度ベースのスケジューリングアルゴリズムを使用して、最初に処理するFiberノードを決定します。このアルゴリズムは、その重要度に基づいて各更新に優先度レベルを割り当てます。たとえば、ユーザー入力によってトリガーされる更新は、通常、バックグラウンドデータフェッチによってトリガーされる更新よりも高い優先度が割り当てられます。

ワークループは常に、最も高い優先度を持つFiberノードを最初に処理します。これにより、クリティカルな更新が迅速に処理され、応答性の高いユーザーエクスペリエンスが提供されます。重要度の低い更新は、ブラウザがアイドル状態のときにバックグラウンドで処理されます。

この優先順位付けシステムは、特に多数の同時更新がある複雑なアプリケーションで、スムーズなユーザーエクスペリエンスを維持するために非常に重要です。ユーザーが検索バーに入力していると同時に、アプリケーションが推奨される検索語のリストをフェッチして表示しているシナリオを考えてみましょう。テキストフィールドが応答性を維持できるように、ユーザーの入力に関連する更新を優先し、推奨される検索語に関連する更新はバックグラウンドで処理できます。

並行レンダリングの実用的な例

並行レンダリングがReactアプリケーションのパフォーマンスとユーザーエクスペリエンスをどのように向上させることができるかについて、いくつかの実用的な例を見てみましょう。

1. ユーザー入力のデバウンス

ユーザーが入力すると検索結果を表示する検索バーを考えてみましょう。並行レンダリングがない場合、各キーストロークは検索結果リスト全体の再レンダリングをトリガーする可能性があり、パフォーマンスの問題とぎくしゃくしたユーザーエクスペリエンスにつながります。

並行レンダリングを使用すると、デバウンスを使用して、ユーザーが短時間入力を停止するまで検索結果のレンダリングを遅らせることができます。これにより、Reactはユーザー入力を優先し、UIが応答しなくなるのを防ぐことができます。

簡単な例を次に示します。

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Perform search logic here
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Debounce function
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

この例では、debounce関数は、ユーザーが300ミリ秒間入力を停止するまで、検索ロジックの実行を遅らせます。これにより、検索結果は必要な場合にのみレンダリングされ、アプリケーションのパフォーマンスが向上します。

2. 画像の遅延読み込み

大きな画像を読み込むと、Webページの初期ロード時間に大きな影響を与える可能性があります。並行レンダリングを使用すると、遅延読み込みを使用して、画像がビューポートに表示されるまで画像の読み込みを延期できます。

この手法は、ユーザーがページとの対話を開始する前にすべての画像が読み込まれるのを待つ必要がないため、アプリケーションの認識されるパフォーマンスを大幅に向上させることができます。

react-lazyloadライブラリを使用した簡単な例を次に示します。

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

この例では、LazyLoadコンポーネントは、画像がビューポートに表示されるまで画像の読み込みを遅らせます。placeholderpropを使用すると、画像の読み込み中に読み込みインジケーターを表示できます。

3. データフェッチングのためのSuspense

React Suspenseを使用すると、データの読み込みを待機している間、コンポーネントのレンダリングを「一時停止」できます。これは、APIからのデータを待機している間に読み込みインジケーターを表示する場合など、データフェッチングのシナリオで特に役立ちます。

Suspenseは並行レンダリングとシームレスに統合され、Reactがデータの読み込みを優先し、UIが応答しなくなるのを防ぎます。

簡単な例を次に示します。

import React, { Suspense } from 'react';

// A fake data fetching function that returns a Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// A React component that uses Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...